<template>
  <div>
    <Header @showResult="isResultShow=false" @changeText="searchText=$event" @Result="Result"></Header>
    <!-- 三个是互逆的  显示一个 另外两个就不会显示-->
    <SearchResult v-if="isResultShow" :searchText="searchText"></SearchResult>
    <SearchSuggestion v-else-if="searchText" :searchText="searchText" :search="Result"></SearchSuggestion>
    <SearchHistory v-else @updata-History="searchHistories=$event" :searchHistories="searchHistories"></SearchHistory>
  </div>
</template>

<script>
import Header from '../../components/Header/Header.vue'
import SearchSuggestion from './components/Search-suggestion.vue'
import SearchResult from './components/Search-result.vue'
import SearchHistory from './components/Search-history.vue'
export default {
  name: "Search",
  created() {},
  data() {
    return {
      isResultShow: false,
      searchText:'',
      searchHistories: JSON.parse(window.localStorage.getItem('searchHistories')) ||[]
    };
  },
  props: {},
  methods: {
    Result(deteleText){
      this.searchText=deteleText
      //  this.$bus.$on('search',(searchHistorie)=>{
      //    console.log(searchHistorie);
      //     val =searchHistorie
      //  })
      const index=this.searchHistories.indexOf(deteleText)
      if(index!==-1){
      this.searchHistories.splice(index,1)
      }
      // if(this.searchText.trim().length!==0){
        this.searchHistories.unshift(deteleText)
        this.isResultShow=true
      // }
    }
  },
  watch: {
    searchHistories(){
      window.localStorage.setItem('searchHistories',JSON.stringify(this.searchHistories))
    }
  },
  components:{
    Header,
    SearchSuggestion,
    SearchResult,
    SearchHistory
  }
};
</script>

<style lang="less" scoped></style>
